<template>
  <div class="ShopCard">
    <router-link to="/shops">
      <div class="ShipCard-title">
        <p>实惠餐馆</p>
        <span>优选</span>
      </div>
      <div class="ShopCard-info">
        <div class="star-number">
          <van-rate
              class="star"
              v-model="value"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              size="18"
              readonly
          />
          <!--        <span>{{value}}分</span>-->
        </div>
        <p>月售<span>1234</span>份</p>
        <span>123km</span>
      </div>
      <div class="ShopCard-info-address">
        <span>江西省南昌市红谷滩</span>
      </div>
      <ul class="goods-list">
        <li>
          <van-image src="https://s1.ax1x.com/2020/10/10/0siVl8.png" />
        </li>
        <li>
          <van-image src="https://s1.ax1x.com/2020/10/10/0siESf.jpg" />
        </li>
        <li>
          <van-image src="https://s1.ax1x.com/2020/10/10/0siVl8.png" />
        </li>
      </ul>
    </router-link>

  </div>
</template>

<script>
import { Rate , Image } from 'vant';


export default {
  name: "ShopCard",
  data(){
    return{
      value: 3,
      TheShopData: this.shopData
    }
  },
  props:['shopData'],
  components: {
    'van-rate': Rate,
    'van-image': Image
  }
}
</script>

<style lang="scss" scoped>
@import "./ShopCard.scss";

</style>
